<template>
	<div class="page">
		<!-- <div class="top">
			<div style="float:left;"><span @click="goBack" class="goback">摄像头管理</span>　|　<span>编辑摄像头</span></div>
			<el-button type="primary" size="small" id="goback" @click="goBack">返回</el-button>
		</div> -->
		<el-form :model="form" block id="addform">
			<el-form-item label="项目名称:" :label-width="formLabelWidth">
				<el-select v-model="form.product_id" placeholder="选择项目" class="inpu" @change="changePro(form.product_id)">
					<el-option v-for="item in products" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select>
				<!-- <el-cascader
					class="inpu"
					v-model="form.product_id"
					:options="products"
					:props="{checkStrictly:true,expandTrigger:'hover',emitPath:false}"
					@change="handleChange(form.product_id)">
				</el-cascader> -->
				<!-- <span class="tip">如果没有选择项，请先添加项目，否则设备无法添加！</span> -->
			</el-form-item>
			<el-form-item label="关联设备:" :label-width="formLabelWidth" style="margin-top:0.4rem;">
				<el-select v-model="form.equip_id" filterable placeholder="选择设备" class="inpu">
					<el-option v-for="item in devices" :key="item.value" :value="item.value" :label="item.label">
					</el-option>
				</el-select><br>
				<span>支持输入关键字模糊搜索,如“2019”;默认应用于整个项目</span>
                <!-- <div class="tip">如果不选择，则</div> -->
			</el-form-item>
			<el-form-item label="摄像头名称:" :label-width="formLabelWidth" style="margin-top:-0.1rem;">
				<el-input v-model="form.camera_name" auto-complete="off" class="inpu" placeholder="请输入摄像头名称"></el-input><br>
				<!-- <span class="tip">编码必须是英文字母，数字，下划线或者破折号的组合</span> -->
			</el-form-item>
			<el-form-item label="HLS地址:" :label-width="formLabelWidth" style="margin-top:0.4rem;">
				<el-input v-model="form.hls_addr" auto-complete="off" class="inpu" style="width:10rem;" type="textarea" :autosize="{minRows:1.6,maxRows:5}" resize="both"  placeholder="请输入HLS播放地址,主要用于手机端"></el-input>
			</el-form-item>
			<el-form-item  label="FLV地址:" :label-width="formLabelWidth" style="margin-top:0.4rem;">
				<el-input v-model="form.rtmp_addr" auto-complete="off" class="inpu" style="width:10rem;" type="textarea" :autosize="{minRows:1.6,maxRows:5}" resize="both" placeholder="请输入FLV播放地址,主要用于电脑端"></el-input>
			</el-form-item>
		</el-form>
        <div class="dialog-footer">
			<el-button type="success" size="small" @click="updateGoods">保存</el-button>
			<!-- <el-button type="primary" size="small" @click="resetForm">重置</el-button> -->
		</div>
    </div>
</template>

<script>
	export default {
		name: 'editCamera',
		data() {
			return {
				formLabelWidth: '2.8rem',
				form: {
					id:0,
					product_id:0,
					camera_name: '',
					equip_id:0,
					hls_addr:"",
					rtmp_addr:""
				},
				products:[],
				devices: [{
					value: 0,
					label: "全部"
				}]
				
			}
		},
		created() {
			var that=this;
			this.form.id=localStorage.getItem('editCameraId');
			this.getProduct();
			this.getCameraInfo();
			
		},
		
		methods: {
			getProduct(){
				var that=this;
				this.$http({
					method: 'post',
					url: '/api/product/tree',
					data: {}
				}).then(res => {
					if (res && res.data.result == "success") {
						this.products=res.data.data;
						
					}
					//console.log("charu")
				}).catch(error => {
					
					console.log(error);
				});
			},
			
			handleChange(par){
				if(Number(par)){
				    this.getDevice(par);
				}
				this.form.equip_id = this.devices[0].value;
			},
			
			goBack() {
				this.$router.go(-1);
			},
			//获取所有设备函数
			getDevice(id) {
				var that = this;
				this.loading=true;
				this.devices = [{
					value: 0,
					label: "全部"
				}];
				this.$http({
					method: 'post',
					async:true,
					url: 'api/equip/all',
					data: {
						'product_id':id
					}
				}).then(res => {
					if (res && res.data.result == "success") {
                        if (res.data.data.length) {
							for (var i = 0; i < res.data.data.length; i++) {
								var device = {
									value: res.data.data[i].id,
									label: res.data.data[i].equip_name
								}
								this.devices.push(device);
							}
							this.loading=false;
						} 
                    }
				}).catch(error => {
					
					console.log(error);
				});
			},
			getCameraInfo() {
				var that=this;
				this.$http({
					method: 'post',
					url: 'api/camera/info',
					data: {
						'id':this.form.id
					}
				}).then(res => {
					if (res && res.data.result == "success") {
						//console.log(res.data.data);
						//this.form=res.data.data;
						for(var key in this.form){
							this.form[key]=res.data.data[key];
						}
						this.getDevice(this.form.product_id);
						if(this.devices.length>1){
							for (var n=0;n<this.devices.length;n++){
								if(this.devices[n].value==res.data.data.equip_id){
									this.form.equip_id=this.devices[n].value;
									break;
								}
							}
						}else{
							this.form.equip_id=0;
						}
						
					}
					
				}).catch(error => {
					console.log(error);
				});
			},
			updateGoods() {
				var that = this;
				this.$http({
					method: 'post',
					url: 'api/camera/update',
					data: this.form
						
				}).then(res => {
					if (res && res.data.result == "success") {
						this.$message({
							message: '恭喜,修改摄像头成功!',
							type: 'success',
							center: true
						});
						this.$router.go(-1);
					}
                }).catch(error => {
					console.log(error);
				});
			}

		}
	}
</script>

<style scoped>
	@media all and (max-width:1600px){
		.dialog-footer {
			transform:translateY(-0.4rem)!important;
		}
	}
	#addform {
		text-align: left;
		margin-top: 0.4rem;
	}

	.inpu {
		width:5rem;
		font-size: 16px;
	}
	
	.inpu >>> .el-input__inner{
		padding:0 4px;
	}
	
	.inpu >>> .el-textarea__inner{
		padding:0 4px;
	}
</style>
